<template>
  <div class="popularSinger">
    <div class="popularSinger-header">
      <div class="hot_wrap">
        <h3>热门歌手</h3>
        <ul class="language">
          <li
            v-for="(item, index) in languageList"
            :key="item.id"
            :class="{ active: defaultIndex === index }"
            @mouseenter="showSingerList(index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="more">
        <router-link to="/singer"> 更多> </router-link>
      </div>
    </div>
    <div class="popularSinger-content">
      <ul>
        <li v-for="item in singerList" :key="item.id">
          <div class="imgwrap">
            <img :src="item.picUrl" alt="" />
          </div>
          <div class="content_title">{{ item.name }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
const languageList = [
  {
    id: 1,
    name: "华语",
  },
  {
    id: 2,
    name: "欧美",
  },
  {
    id: 3,
    name: "日韩",
  },
];

import { reqSingerList } from "@/api";
export default {
  name: "PopularSinger",
  data() {
    return {
      defaultIndex: 0,
      languageList,
      singerList: [],
    };
  },
  mounted() {
    this.getSingerList(0);
  },
  methods: {
    showSingerList(index) {
      this.defaultIndex = index;
      this.getSingerList(index);
    },
    async getSingerList(index) {
      let res = await reqSingerList();
      if (res.code === 200) {
        var arr1 = [];
        var arr2 = [];
        res.artists.forEach((item, index) => {
          if (index % 5 === 0) {
            arr1.push(arr2);
            arr2 = [];
          }
          // 默认往arr2中push  如果等于9时 往arr1中push
          arr2.push({
            id: item.id,
            name: item.name,
            picUrl: item.picUrl,
          });
        });
      }
      arr1.push(arr2);
      arr1.shift();
      this.singerList = arr1[index];
    },
  },
};
</script>

<style lang="less" scoped>
.popularSinger {
  width: 1000px;
  height: 238px;
  margin: 0 auto;
}

.popularSinger-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1000px;
  height: 50px;
  margin-top: 60px;
  margin-bottom: 20px;
}

.hot_wrap {
  display: flex;
  width: 376px;
  align-items: center;
}

.hot_wrap h3 {
  font-size: 25px;
  font-weight: normal;
  color: #000000;
  cursor: default;
}

.hot_wrap .language {
  width: 222px;
  margin-left: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hot_wrap .language li {
  padding: 3px 12px;
  font-size: 14px;
  color: #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-right: 14px;
  border-radius: 15px;
}

.hot_wrap li.active {
  background-color: #e5f6ff;
  color: #2ab7ff;
}

.popularSinger-header .more {
  color: #858585;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
}

.popularSinger-header .more:hover {
  color: #0badff;
}

.popularSinger-content ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 168px;
}

.popularSinger-content ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.popularSinger-content li .imgwrap {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
}

li .imgwrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

li .imgwrap:hover img {
  transform: scale(1.05);
}

.content_title {
  margin-top: 10px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  cursor: pointer;
}
</style>
